import styles from '@/pages/main/index.less';
import Block from '@/pages/main/components/Block';
import { useEffect, useRef } from 'react';
import echarts from 'echarts';
import 'echarts-liquidfill/src/liquidFill';
import { getColor } from '@/utils';

const scaleBase = window.scaleBase;
const colorMap = ['#0066ff', '#20F1DB', '#ffb325', '#F15151', '#4656bf' ];

const RightBottom = props => {
  const { data } = props;
  const inChart = useRef();
  const outChart = useRef();

  const renderLiquidChart = (chart, data, color = '#26C7F6') => {
    const option = {
      series: [{
        type: 'liquidFill',
        itemStyle: {
          shadowBlur: 0,
          color: getColor(color, 1),
          opacity: 0.7,
        },
        label: {
          color: '#fff',
          fontSize: 16 * scaleBase,
        },
        backgroundStyle: {
          color: getColor(color, 0.1),
        },
        outline: {
          borderDistance: 0,
          itemStyle: {
            borderWidth: 3 * scaleBase,
            borderColor: color,
            shadowBlur: 30 * scaleBase,
            shadowColor: color
          }
        },
        radius: '75%',
        period: 2000,
        waveLength: '60%',
        animationDuration: 1000,
        data: [data.done / data.total]
      }]
    }
    chart.setOption(option);
  }

  const renderBarChart = (chart, {out, back}) => {
    const option = {
      grid: {
        left: 35 * scaleBase,
        bottom: 20 * scaleBase,
        top: 10 * scaleBase,
        right: 30 * scaleBase,
      },
      xAxis: {
        data: ['今日已出库', '今日已入库'],
        axisLabel: {
          margin: 6 * scaleBase,
          textStyle: {
            color: '#fff',
            fontSize: 12 * scaleBase,
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        z: 10
      },
      yAxis: {
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          margin: 6 * scaleBase,
          textStyle: {
            color: '#fff',
            fontSize: 10 * scaleBase,
          }
        },
        splitLine: {
          lineStyle: {
            color: '#283246',
            width: scaleBase
          }
        },
      },
      series: [
        {
          type: 'bar',
          barWidth: '40%',
          label: {
            show: true,
            position: 'top',
            fontSize: 10 * scaleBase,
            color: '#fff',
          },
          itemStyle: {
            color: ({dataIndex}) => {
              return new echarts.graphic.LinearGradient(
                0, 1, 0, 0,
                [
                  {offset: 0, color: getColor(colorMap[dataIndex], 0.1)},
                  {offset: 1, color: colorMap[dataIndex]}
                ]
              )
            }
          },
          data: [out, back]
        }
      ]
    }
    chart.setOption(option);
  }
  const renderChart = () => {
    const { out, back, total } = data;

    renderLiquidChart(outChart.current, {done: out, total}, '#2CFDFF');
    renderBarChart(inChart.current, {back, out});
  }

  const renderBody = () => {
    return <div className={styles.centerRightBottomWrapper}>
      <div className={styles.centerRightBottomChartWrapper}>
        <div>
          <h2>库外情况</h2>
          <div className={styles.centerRightBottomChart}>
            <div id={'right-bottom-out-chart'} className={styles.chart}/>
            <div className={styles.centerRightBottomInfoWrapper}>
              <div className={styles.centerRightBottomInfoItem}>
                <div>
                  <h4>{data?.out}</h4>
                  <h3>库外数量</h3>
                </div>
                <div>
                  <h4>{data?.total}</h4>
                  <h3>总计数量</h3>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <h2>今日出入库情况</h2>
          <div className={styles.centerRightBottomChart}>
            <div id={'right-bottom-in-chart'} className={styles.chart}/>
            {/*<div className={styles.centerRightBottomInfoWrapper}>*/}
            {/*  <div className={styles.centerRightBottomInfoItem}>*/}
            {/*    <div>*/}
            {/*      <h4>{data?.back}</h4>*/}
            {/*      <h3>今日出库</h3>*/}
            {/*    </div>*/}
            {/*    <div>*/}
            {/*      <h4>{data?.out}</h4>*/}
            {/*      <h3>今日入库</h3>*/}
            {/*    </div>*/}
            {/*  </div>*/}
            {/*</div>*/}
          </div>
        </div>
      </div>
      <div className={styles.centerRightBottomCarouselWrapper}/>
    </div>
  }
  useEffect(()=> {
    inChart.current = echarts.init(document.getElementById('right-bottom-in-chart'));
    outChart.current = echarts.init(document.getElementById('right-bottom-out-chart'));
  }, []);

  useEffect(()=> {
    data && renderChart();
  });

  return <Block
    containerClassName={styles.bottom}
    title={'周转箱完成情况'}
    body={renderBody()}
  />
}

export default RightBottom;
